<template>
	<view class="comparisonView">
		<!-- #ifndef MP -->
		<!-- 返回组件 -->
		<view class="goBack">
			<goBack :title="'对比详情'"></goBack>
		</view>
		<!-- #endif -->
		<view class="box_header">
			<view class="box1" @click="toSearch">
				<image v-if="!ComparisonArr1.name" src="../../static/img_compare_add.png" />
				<view class="select" v-else>
					<image class="img" :src="ComparisonArr1.thumb_image_url" />
					<image class="after" @click.stop="deteleComparisonArr(1)"
						src="../../static/ic_delete_default.png" />
				</view>
			</view>
			<view class="box2">
				<image src="../../static/ic_library_vs.png" />
			</view>
			<view class="box1" @click="toSearch">
				<image v-if="!ComparisonArr2.name" src="../../static/img_compare_add.png" />
				<view class="select" v-else>
					<image class="img" :src="ComparisonArr2.thumb_image_url" />
					<image class="after" @click.stop="deteleComparisonArr(2)"
						src="../../static/ic_delete_default.png" />
				</view>
			</view>
		</view>

		<view class="box_title">营养元素</view>
		<view class="box_list">
			<view class="box_item">
				<view>
					<li v-for="(item, index) in ComparisonArr1.nutrition" :key="index">
						<text v-if="item.value">{{ item.value }}{{ item.unit }}</text>
						<text v-else>-</text>
					</li>
				</view>
				<view v-if="ComparisonArr1.name || ComparisonArr2.name ">
					<li v-for="(item, index) in NutritionArr" :key="index">{{ item }}</li>
				</view>
				<view>
					<li v-for="(item, index) in ComparisonArr2.nutrition" :key="index">
						<text v-if="item.value">{{ item.value }}{{ item.unit }}</text>
						<text v-else>-</text>
					</li>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {};
		},
		computed: {
			...mapState(["ComparisonArr1", "ComparisonArr2", "NutritionArr"])
		},
		methods: {
			...mapMutations(["toggleComparisonState", "deteleComparisonArr"]),
			toSearch: function() {
				this.toggleComparisonState(true);
				uni.navigateTo({
					url: '../SearchPage/SearchPage'
				})
			},
		},
	}
</script>

<style lang="scss">
	.comparisonView {
		.goBack {
			position: sticky;
			top: 0;
			left: 0;
		}

		.box_header {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 30px 0;

			.box1 {
				image {
					width: 70px;
					height: 70px;
				}

				.select {
					position: relative;

					.img {
						border-radius: 9999px;
					}

					.after {
						position: absolute;
						width: 25px;
						height: 25px;
						right: -10px;
						top: -10px;
					}
				}
			}

			.box2 {
				margin: 0 20px;

				image {
					width: 40px;
					height: 40px;
				}
			}
		}

		.box_title {
			padding: 10px 0;
			background: white;
		}

		.box_list {
			background: white;

			height: 69vh;
			overflow-y: auto;

			.box_item {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 15px;

				view {
					flex: 1;
					list-style: none;
					display: flex;
					flex-direction: column;
					align-self: flex-start;
					font-size: 14px;

					li {
						height: 50px;
						line-height: 50px;
					}

					&:nth-of-type(1) {
						text-align: left;

						li {
							position: relative;


						}
					}

					&:nth-of-type(3) {
						text-align: right;

						li {
							position: relative;


						}
					}
				}
			}
		}
	}
</style>
